<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://www.backbase.com/bjs/core" prefix="bjs" %>   

<f:subview id="ExpData" >

  <bjs:view>
  <h:form> 
  	<!-- tabs -->
  	<b:tabbox style="height: 100%">
		<b:tab b:label="Custom Format" b:state="selected">
<center>
    <table border="0">
	<tr><!-- input matrix -->
		<td style="background-color: #F3F7F9; color: #666;"><!-- location -->
			Enter location of the data matrix on your computer:
		</td>
		
		<td align="right">
			 <bjs:fileUpload size="26"></bjs:fileUpload>
		</td>
		
		
	</tr>
	<tr><!-- matrix URL -->
		<td style="background-color: #F3F7F9; color: #666;">
			or enter the data matrix URL	
		</td>
		<td align="right">
			<bjs:inputText size="40"></bjs:inputText>
		</td>
	
	</tr>
	<tr><!-- type data file -->
		<td style="background-color: #F3F7F9; color: #666;">
			Select the type of your data file
		</td>
		<td align="right">
			<bjs:comboBox ></bjs:comboBox>
		</td>
	
	</tr><!-- coordinates -->
		<td style="background-color: #F3F7F9; color: #666;">
		Enter the coordinates (x,y) where the data matrix starts in the input file. All the columns to the left of x will be used as row annotations, and all the rows above y will be used as column annotations. Column numbering starts with 1. If no rows/columns are provided for annotations, column/row names will be generated. The default setting of (2,2) will use the first column and row as column/row identifiers. Note: the image to the right is an example.
		</td>
		<td align="right">
		<img src="images/matrix.png" width="100%" height="100%"/>
		</td>
		<td align="right">
			<center>
			X <bjs:inputText size="1"></bjs:inputText>
			<br/>
			Y <bjs:inputText size="1"></bjs:inputText>
			</center>
		</td>
	<tr><!-- exp name -->
		<td style="background-color: #F3F7F9; color: #666;">
			Enter a name for your experiment (optional, but advised)
		</td>
		<td align="right">
			<bjs:inputText size="40"></bjs:inputText>
			
		</td> 
	
	</tr> 
	
	<tr>
		<td>
		</td>
		<td align="right" >
		 
			<!--<h:commandButton action="Execute with h" action="#{user.createFile}"/>-->
			<bjs:commandButton value="crear archivo"  action="#{sample.doSomething}"   />
			 
		
			<b:button b:action="trigger" b:event="open" b:target="id('prb')">Execute
			 
			 </b:button>
			<b:button b:action="trigger" b:event="close" b:target="id('ExpDatasrc')">Close</b:button>
			
		</td>
		
	
	</tr>
</table>

</center>

		</b:tab> 
		
		<b:tab b:label="Affymetryx"  >
		<b:accordeon  style="width: 100%; background-color: #F3F7F9;">
			<b:accordeonhead>Upload the .CEL files directly from your computer</b:accordeonhead>
				<b:accordeonbody>
		<b:panelset b:rows="*" style="color: white;" b:minwidth="300px" b:minheight="200px" b:resize="all" b:resizeconstraint="..">
			<b:panel style="background-color: #f3f7f9; color: #666; padding: 0px 0 0 0px; overflow:auto;">
					<table border="0">
			<tr>
				<td>
					Select the .CEL files directly from your computer
				</td>
					
				<td>
					<bjs:fileUpload size="26"></bjs:fileUpload>
				</td>
			</tr>
	  		<tr>
	  			<td>
	  					
	  			</td>
	  			<td>
					<b:button b:action="load" b:url="EP_NG/temp/datos.xml" b:destination="id('_sdb_loadexample')" b:mode="asfirstchild">Upload</b:button>  				
	  			</td> 
	  		</tr>
				
		</table>
		<center>	
		<br/><br/>
		<table class="filmTable" id="removeTable">
			<thead>
				<tr>
					<th style="width: 500px;"><center>Files to upload</center></th>
				</tr>
				
			</thead>
			<tbody id="_sdb_loadexample" />
				
		</table>
		<s:behavior b:name="toggleRow">
			<s:event b:on="select" b:action="addclass" b:value="filmHighlightRow" />
			<s:event b:on="deselect" b:action="removeclass" b:value="filmHighlightRow" />
			<s:event b:on="mouseenter">
				<s:fxstyle b:background-color="#7d8fce" b:time="250" />
			</s:event>
			<s:event b:on="mouseleave">
				<s:fxstyle b:background-color="#ffffff" b:time="1000" />
			</s:event>
		</s:behavior>
		<br/><br/>
		<table border="0" width="50%">
			<tr>
				<td align="center">
					<b:button >Delete selected files</b:button>
					<!-- <a b:action="remove" b:target="id('removeTable')/tbody/tr[last()]">Remove the last row from the table</a> -->
					<a b:action="remove" b:target="id('removeTable')/tbody/tr/td[id=2]">Remove sel row</a>
				</td>
				<td align="left">
					<a b:action="remove" b:target="id('removeTable')/tbody/tr[*]">Clear copied items</a>

					
				</td>
			</tr> 
		</table> 
		<br/><br/>
		<table border="0">
			<tr>
				<td>
				Enter a name for your experiment (optional, but advised)
				</td>
					
				<td>
					<bjs:inputText size="40"></bjs:inputText>
				</td>
			</tr>
			<tr>
				<td>
				</td>
				<td align="left">
				<b:button >Execute</b:button>				
				</td> 
				
			</tr> 
		</table>


		</center>
		</b:panel>
			</b:panelset>
			
				</b:accordeonbody>	
			<b:accordeonhead>OR enter the URL of an archive (TAR/GZ or ZIP) of the .CEL files </b:accordeonhead>
				<b:accordeonbody>
					<b:panelset b:rows="*" style="color: white;" b:minwidth="300px" b:minheight="200px" b:resize="all" b:resizeconstraint="..">
						<b:panel style="background-color: #f3f7f9; color: #666; padding: 0px 0 0 0px; overflow:auto;">
						<br/><br/>
							<table border="0">
								<tr>
									<td>Enter the URL of an archive of the .CEL files</td>
									<td>
									<bjs:inputText size="40"></bjs:inputText>
									</td>
								</tr>
							
								<tr>
									<td> Enter a name for your experiment (optional, but advised)</td>
									<td>
									<bjs:inputText size="40"></bjs:inputText>
									</td>
								</tr>
								<tr>
									<td>
									</td>
									<td align="right">
										<b:button >Execute</b:button>
									</td>
								</tr>
															
							</table> 
							
						</b:panel>
					</b:panelset>
				</b:accordeonbody>
		</b:accordeon>
		
		</b:tab>
<b:tab b:label="ArrayExpress"   >
	
	
</b:tab>
		
</b:tabbox>

 </h:form> 
      
  </bjs:view>

</f:subview>